<template>
	<view class="wrap">
		<view class="content">
			<image class="top-icon" src="@/pages/agent/static/icon/progress-detail-icon-top.png"></image>
			<image class="bottom-icon" src="@/pages/agent/static/icon/progress-detail-icon-bottom.png" mode="widthFix"></image>
			<view class="content-box">
				<view class="line-box" v-for="(item,index) in list" :key="index" :class="{active:item.active}">
					<view class="title">{{item.title}}</view>
					<view class="label" v-for="(item2,index2) in item.label" :key="index2">时间：<text>2020年11月9日</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						title:'签署房地产买卖合同',
						active:!0
					},
					{
						title:'银行按揭',
						active:!0
					},
					{
						title:'批贷',
						active:!0
					},
					{
						title:'赎楼解押',
						active:!0,
						label:[1,2,3,4]
					},
					{
						title:'缴税过户'
					},
					{
						title:'领取房本'
					},
					{
						title:'银行解压'
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.wrap{
		padding: 30rpx 30rpx 30rpx;background-image: linear-gradient(to bottom,#f66c4d,#fa3d38);
		.content{
			border-radius: 30rpx;position: relative;background-color: #fff;min-height: 100vh;padding: 30rpx;
			.top-icon{width: 160rpx;height: 160rpx;display: block;position: absolute;right: 20rpx;top: -16rpx;}
			.bottom-icon{width: 100%;display: block;position: absolute;left: 0;bottom: 0;}
			.content-box{
				padding: 100rpx 0 150rpx;margin-left: 20rpx;
				border-left: 3rpx dashed #ccc;
				.line-box{padding-left: 30rpx;padding-top: 30rpx;padding-bottom: 20rpx;
					.title{font-size: 30rpx;position: relative;color: #666;
						&::after{content: '';display: block;position: absolute;left: -39rpx;width: 16rpx;height: 16rpx;border-radius: 50%;background-color: #fff;top: 10rpx;border: 2rpx solid #7b7b7b;}
					}
					&.active{
						.title{color: #000;
							&::after{background-color: #f8603d;border: 2rpx solid #f7461e;}
						}
					}
					.label{background-color: #f4f4f4;padding: 18rpx 20rpx;word-break: keep-all;border-radius: 10rpx;margin-top: 20rpx;
						text{color: #f8603d;word-break: keep-all;}
					}
				}
				
			}
		}
	}
</style>
